import { getUserInfo, login, getUserDetailById } from '@/api/user'
import { getToken, setToken, removeToken, setTimeStamp } from '@/utils/auth'
import { resetRouter } from '@/router'
const state = {
  // 存储token
  token: getToken(),

  userInfo: {}
}
const mutations = {
  setToken(state, data) {
    // 修改token
    state.token = data
    // 除了将 token 放入 state，还需要数据持久化
    setToken(data)
  },
  // 清空 token
  remoreToken(state) {
    state.token = ''
    // 记得一并清理 Cookies 避免刷新又回来
    removeToken()
  },
  // 设置用户数据
  setUserInfo(state, data) {
    // 为了避免数据的污染，最好拷贝一份新的对象
    state.userInfo = { ...data }
  },
  // 清理用户数据
  remoreUserInfo(state) {
    state.userInfo = {}
  }
}
const actions = {
  async login(store, data) {
    // 1.发送请求
    const res = await login(data) // 这个login是在api里封装的方法
    // 2.调用 mutations 存储 token
    // 因为在响应拦截器已经将 res.data.data 结构
    // 这里的 res 就是直接我们需要的数据
    // store.commit('setToken', res.data.data)
    store.commit('setToken', res)
    // 登录成功后记录时间戳
    setTimeStamp()
    //  这里应该是被页面调用的 actions
    // 页面调用时应该传入 表单
    // 1.发送请求
    // login(data).then(res => {
    //   console.log(res)
    //   // 2.调用 mutations 存储 token
    //
    // })
  },
  async getUserInfo(store) {
    const res = await getUserInfo()
    // 这里获取的数据不够，少了头像
    // 就要从在这获取用户的详情
    const userDetail = await getUserDetailById(res.userId)

    const data = {
      ...res,
      ...userDetail
    }
    store.commit('setUserInfo', data)
  },
  // 为了方便复用，把 token 和 userInfo 封装在actions当中
  logout(store) {
    store.commit('remoreToken')
    store.commit('remoreUserInfo')
    // 清理路由配置
    resetRouter()
    // 清理菜单
    // 默认带模块路径的语法, 是调用子模块 mutations 的方式
    // 但是 permission 跟 user 是兄弟模块
    // 如果要以子模块的方式触发, 只能是上一层的根模块才可以
    // 这里的调用可以加上第三个参数, 是一个配置对象
    // 里面用一个 root 属性,可以指定当前的调用基于跟模块
    store.commit('permission/setRoutes', [], { root: true })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
